import { createStore } from "vuex";
import { ModuleType } from "@/type";
import storagePlugin from "@/utils/storagePlugin";
import xmlTP from "@/common/xmlTP";

export default createStore({
  state: {
    currentTheme: "theme-orange",
    dragComponent: {
      id: "",
      name: "",
      value: "",
      type: "",
      icon: "",
      layout: false,
      children: [],
      attribute: []
    } as ModuleType,
    moduleList: xmlTP as ModuleType[],
    currentNode: {} as ModuleType,
    historyList: [] as ModuleType[],
    customGroup: [] as ModuleType[]
  },
  getters: {
    currentTheme: state => state.currentTheme,
    dragComponent: state => state.dragComponent,
    moduleList: state => state.moduleList,
    currentNode: state => state.currentNode,
    historyList: state => state.historyList,
    customGroup: state => state.customGroup
  },
  mutations: {
    setCurrentTheme(state, value) {
      state.currentTheme = value;
    },
    setDragComponent(state, value: ModuleType) {
      state.dragComponent = value;
    },
    setModuleList(state, value) {
      state.moduleList = value;
    },
    setCurrentNode(state, value) {
      state.currentNode = value;
    },
    setHistoryList(state, value) {
      state.historyList = value;
    },
    setCustomGroup(state, value) {
      state.customGroup = value;
    }
  },
  actions: {
    clearCurrentNode({ commit }) {
      setTimeout(() => {
        commit("setCurrentNode", {
          id: "",
          name: "",
          value: "",
          type: "",
          icon: "",
          layout: false,
          children: [],
          attribute: []
        });
      }, 0);
    }
  },
  modules: {},
  plugins: [storagePlugin]
});
